<div id="logstreamFooter" class="footer fixed-bottom">
    <button id="logstreamViewLogButton" type="button" class="btn float-right" onclick="showLog();">
        <i id="logstreamViewLogButtonIcon" class="fas fa-caret-up fa-lg" data-toggle='tooltip' data-placement='left' title='Show Log'></i>
    </button>

    <div id="logstreamManager">
        <nav id="logstreamManagerNav" class="navbar position-sticky navbar-expand-lg navbar-dark bg-dark">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#logstreamManagerNavText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="logstreamManagerNavText">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="Stop log stream">
                        <a id="logstreamStopStartButton" class="logstreamIcon nav-link"><i class="fas fa-stop"></i></a>
                    </li>
                    <li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="Clear log">
                        <a id="logstreamClearLogButton" class="logstreamIcon nav-link"><i class="fas fa-trash-alt"></i></a>
                    </li>
                    <li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="Zoom out">
                        <a id="logstreamZoomOutButton" class="logstreamIcon nav-link"><i class="fas fa-search-minus"></i></a>
                    </li>
                    <li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="Zoom in">
                        <a id="logstreamZoomInButton" class="logstreamIcon nav-link"><i class="fas fa-search-plus"></i></a>
                    </li>
                    <li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="Log levels">
                        <a id="logstreamLogLevelsButton" class="logstreamIcon nav-link" data-toggle="modal" data-target="#logstreamLogLevelsModal"><i class="fas fa-layer-group"></i></a>
                    </li>
                    <li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="Columns">
                        <a id="logstreamColumnsButton" class="logstreamIcon nav-link" data-toggle="modal" data-target="#logstreamColumnsModal"><i class="fas fa-columns"></i></a>
                    </li>
                    <li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="Filter">
                        <a id="logstreamFilterButton" class="logstreamIcon nav-link" data-toggle="modal" data-target="#logstreamFilterModal"><i class="fas fa-filter"></i></a>
                    </li>
                    <li id="logstreamCurrentFilter" class="navbar-text">
                    </li>
                    <li id="logstreamResizeButton" class="nav-item"><a class="nav-link"><i class="fas fa-arrows-alt-v"></i></a></li>
                    <li id="logstreamHideLogButton" class="nav-item" data-toggle="tooltip" data-placement="left" title="Hide Log"><a class="logstreamIcon nav-link" onclick="hideLog();"><i class="fas fa-caret-down fa-lg"></i></a></li>
                </ul>
            </div>
        </nav>

        <div id="logstreamManagerLog">
            <a id="logstreamInformationSection"></a>
            <a id="logstreamFollowLogButton" data-toggle="tooltip" data-placement="left" title="Follow log (auto scroll)"><i id="logstreamFollowLogButtonIcon" class="text-success fas fa-circle-notch fa-spin"></i></a>
            <div id="logstreamLogTerminal" class="bg-dark text-light ">
                <samp id="logstreamLogTerminalText" class="text-wrap">
                </samp>
            </div>

        </div>
    </div>
</div>


<!-- Filter -->
<div class="modal fade" id="logstreamFilterModal" tabindex="-1" aria-labelledby="logstreamFilterModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog modal-dialog-centered modal-sl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logstreamFilterModalLabel">Filter</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="logstreamFilterModalInputIcon"><i class="fas fa-filter"></i></span>
                    </div>
                    <input id="logstreamFilterModalInput" type="text" class="form-control" placeholder="Filter log" aria-label="Filter" aria-describedby="logstreamFilterModalInputIcon">
                    <div class="input-group-append">
                        <button id="logstreamFilterModalInputButton" type="button" class="btn btn-success">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Levels -->
<div class="modal fade" id="logstreamLogLevelsModal" tabindex="-1" aria-labelledby="logstreamLogLevelsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logstreamLogLevelsModalLabel">Log Levels</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-hover table-sm">
                    <tbody id="logstreamLogLevelsModalTableBody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Columns -->
<div class="modal fade" id="logstreamColumnsModal" tabindex="-1" aria-labelledby="logstreamColumnsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="logstreamColumnsModalLabel">Columns</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="custom-control custom-switch">
                    <input checked type="checkbox" class="custom-control-input" id="logstreamColumnsModalLevelIconSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalLevelIconSwitch">Log Level Icon</label>
                </div>

                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="logstreamColumnsModalSequenceNumberSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalSequenceNumberSwitch">Sequence Number</label>
                </div>

                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="logstreamColumnsModalHostNameSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalHostNameSwitch">Host Name</label>
                </div>
                
                <div class="custom-control custom-switch">
                    <input checked type="checkbox" class="custom-control-input" id="logstreamColumnsModalDateSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalDateSwitch">Date</label>
                </div>

                <div class="custom-control custom-switch">
                    <input checked type="checkbox" class="custom-control-input" id="logstreamColumnsModalTimeSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalTimeSwitch">Time</label>
                </div>

                <div class="custom-control custom-switch">
                    <input checked type="checkbox" class="custom-control-input" id="logstreamColumnsModalLevelSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalLevelSwitch">Log Level</label>
                </div>

                <div class="custom-control custom-switch">
                    <input checked type="checkbox" class="custom-control-input" id="logstreamColumnsModalLoggerNameAbbreviatedSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalLoggerNameAbbreviatedSwitch">Logger Name (Abbreviated)</label>
                </div>
                
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="logstreamColumnsModalLoggerNameSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalLoggerNameSwitch">Logger Name</label>
                </div>
                
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="logstreamColumnsModalLoggerClassNameSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalLoggerClassNameSwitch">Logger Class Name</label>
                </div>
                
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="logstreamColumnsModalSourceClassFullAbbreviatedSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalSourceClassFullAbbreviatedSwitch">Full Class Name (Abbreviated)</label>
                </div>

                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="logstreamColumnsModalSourceClassFullSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalSourceClassFullSwitch">Full Class Name</label>
                </div>

                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="logstreamColumnsModalSourceClassSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalSourceClassSwitch">Class Name</label>
                </div>

                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="logstreamColumnsModalSourceMethodNameSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalSourceMethodNameSwitch">Method Name</label>
                </div>

                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="logstreamColumnsModalSourceFileNameSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalSourceFileNameSwitch">File Name</label>
                </div>
                
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="logstreamColumnsModalSourceLineNumberSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalSourceLineNumberSwitch">Line Number</label>
                </div>
                
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="logstreamColumnsModalProcessIdSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalProcessIdSwitch">Process Id</label>
                </div>

                <div class="custom-control custom-switch">
                    <input checked type="checkbox" class="custom-control-input" id="logstreamColumnsModalProcessNameSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalProcessNameSwitch">Process Name</label>
                </div>
                
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="logstreamColumnsModalThreadIdSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalThreadIdSwitch">Thread Id</label>
                </div>

                <div class="custom-control custom-switch">
                    <input checked type="checkbox" class="custom-control-input" id="logstreamColumnsModalThreadNameSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalThreadNameSwitch">Thread Name</label>
                </div>

                <div class="custom-control custom-switch">
                    <input checked type="checkbox" class="custom-control-input" id="logstreamColumnsModalMessageSwitch">
                    <label class="custom-control-label" for="logstreamColumnsModalMessageSwitch">Log message</label>
                </div>

            </div>
        </div>
    </div>
</div>
